<template>
    <Modal v-model="visible" width='800' :mask-closable="false" :closable="false" :title="title">
      <Form ref='pageModel' :model="pageModel" :rules="ruleInline"  label-position="right" inline :label-width='100'>
        <Row>
          <FormItem prop="videoTitle" label="视频名称">
            <Input v-model="pageModel.videoTitle" placeholder="请输入" clearable style="width:200px"></Input>
          </FormItem>
        </Row>
        <Row>
          <FormItem prop="remak" label="视频简介">
            <Input v-model="pageModel.remak" type="textarea" placeholder="请输入" clearable style="width:200px"></Input>
          </FormItem>
        </Row>
        <Row>
          <FormItem prop="coverPath" label="上传封面">
            <upload-logo :value="pageModel.coverPath" @upload="upload"></upload-logo>
          </FormItem>
        </Row>
        <Row>
          <FormItem prop="videoPath" label="视频上传">
            <upload-video :value="pageModel.videoPath" @video="video" @videoLength="handleLength" :isEdit="isEdit"></upload-video>
          </FormItem>
        </Row>
        <Row>
          <FormItem prop="score" label="视频分值">
            <InputNumber v-model="pageModel.score" placeholder="请输入" clearable style="width:200px" :min="1" :max="10000"></InputNumber>
          </FormItem>
        </Row>
        <Row>
          <FormItem prop="videoType" label="视频分类">
            <Select v-model="pageModel.videoType" placeholder="请选择" clearable style="width:200px">
              <Option v-for="(_item,index) in type" :key="index" :value="_item.id">{{_item.title}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="isMember" label="视频权限">
            <Select v-model="pageModel.isMember" placeholder="请选择" clearable style="width:200px">
              <Option v-for="(_item,index) in permission" :key="index" :value="_item.id">{{_item.title}}</Option>
            </Select>
          </FormItem>
        </Row>
        <Row>
          <FormItem prop="sort" label="排序">
            <InputNumber v-model="pageModel.sort" placeholder="请输入" clearable style="width:200px" :min="1" :max="10000"></InputNumber>
          </FormItem>
        </Row>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="cancel"  class="m-l-sm">取消</Button>
<!--        <Button @click="next" class="m-l-sm">保存并继续</Button>-->
        <Button @click="save" type="primary" class="m-l-sm">保存</Button>
      </div>
    </Modal>
</template>

<script>
  import uploadLogo from "../upload/upload-logo.vue";
  import uploadVideo from "../upload/upload-video.vue";
  import {saveVideo} from '@/api/video'
  import {examType,videoPermission} from '@/libs/util.js';

  export default {
        components:{
          uploadLogo,
          uploadVideo
        },
        props:{
            title:{
              type: String,
              default: '新增视频'
            },
            visible:{
               type: Boolean,
                default: false
            },
            content:{
              type: Object,
              default: {}
            },
            isEdit:{
              type: Boolean,
              default: false
            }
        },
        data() {
            return {
              pageModel:{
                coverPath:'',
                videoTitle:'',
                remak:'',
                videoPath:'',
                isMember:'',
                videoLength:0,
                videoType:'',
                score:1,
                sort:1
              },
              ruleInline:{
                videoTitle: [{ required: true, message: "请填写视频名称" }],
                videoPath: [{ required: true, message: "请上传视频" }],
                score: [{ required: true, message: "请输入分值"}],
                coverPath: [{ required: true, message: "请上传封面"}],
                videoType: [{ required: true, message: "请选择视频分类"}],
                isMember:[{required: true, message: "请选择视频权限分类"}],
                sort:[{required: true, message: "请填写顺序"}]
              },
              type:examType,
              permission: videoPermission,
              isShow: false,
            }
        },
        watch: {
          visible(val,old) {
            if(val) {
              if(this.content.videoTitle){
                this.pageModel = Object.assign({},{
                  coverPath : this.content.coverPath,
                  videoPath: this.content.videoPath,
                  videoTitle: this.content.videoTitle,
                  videoType: this.content.videoType,
                  remak: this.content.remak,
                  score: this.content.score,
                  videoLength: this.content.videoLength,
                  sort: this.content.sort,
                  id: this.content.id,
                  isMember: this.content.isMember?this.content.isMember:'0',
                });
              }else {
                this.pageModel = {};
                this.pageModel.videoLength = 0;
                this.pageModel.score = 1;
                this.pageModel.sort = 1;
              }

            }
          },
        },
        computed: {},
        created() {
        },
        methods: {
          save() {
            this.$refs['pageModel'].validate(valid => {
              if (valid) {
                saveVideo(this.pageModel)
                  .then(res => {
                    this.$emit('update');
                    this.cancel()
                  })
              }
            })
          },
          cancel() {
            this.$emit('update:visible',false);
            this.$refs['pageModel'].resetFields();
          },
          video(param) {
            this.pageModel.videoPath = param.map(x => x.url).join(',');
            this.$refs["pageModel"].validateField("videoPath");

          },
          handleLength(length) {
            this.pageModel.videoLength = length
          },
          upload(param) {
            this.pageModel.coverPath = param.url;
            this.$refs["pageModel"].validateField("coverPath");

          }
        }
    };
</script>

<style scoped>

</style>
